<template>
  <div class="personalInformation">
    <div class="personalInformationDate" align="center">
      <h1 style="color: gray">个人中心</h1>
      <el-form
          :model="personalInformationForm"
          :rules="personalInformationRules"
          ref="loginForm"
          label-width="60px"
          label-position="right"
          style="text-align: right"
      >
        <el-form-item label="userId:" prop="userId" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="userId"
                  type="text"
                  placeholder="重置userId"
                  v-model="personalInformationForm.userId"
                  disabled
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="nickname:" prop="nickname" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="nickname"
                  type="text"
                  placeholder="重置昵称"
                  v-model="personalInformationForm.nickname"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="password" prop="password" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-lock"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="password"
                  type="text"
                  placeholder="重置密码"
                  v-model="personalInformationForm.password"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="avatar:" prop="avatar" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="avatar"
                  type="text"
                  placeholder="重置头像"
                  v-model="personalInformationForm.avatar"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="email:" prop="email" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="email"
                  type="text"
                  placeholder="重置邮件"
                  v-model="personalInformationForm.email"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="mobilePhoneNumber:" prop="mobilePhoneNumber" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="mobilePhoneNumber"
                  type="text"
                  placeholder="重置电话号码"
                  v-model="personalInformationForm.mobilePhoneNumber"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="ip:" prop="ip" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="ip"
                  type="text"
                  placeholder="重置家庭住址"
                  v-model="personalInformationForm.ip"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="school:" prop="school" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="school"
                  type="text"
                  placeholder="重置学校"
                  v-model="personalInformationForm.school"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="major:" prop="major" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="major"
                  type="text"
                  placeholder="重置专业"
                  v-model="personalInformationForm.major"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="margin-top: 55px">
          <el-button type="primary" round class="submitBtn" @click="ResetButton" color="whrite"
          ><h3 style="color:white;">Reset</h3>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>



import request from "@/utils/request";
import router from "@/router";

export default {
  name: "PersonInformation",

  created() {
    this.load()
  },

  methods:{
    load(){
      let user=sessionStorage.getItem("User")
      let userId=JSON.parse(user).userId
      this.personalInformationForm.userId=JSON.parse(user).userId
      //根据用户Id获取用户信息
      request.get("/user/personInformationSelect/"+userId).then(res => {
        console.log(res.data)
        if (res.data == 500) {
          alert("用户id返回错误,返回推荐文章页面!")
          router.push("/CommentView")
        } else {
          this.personalInformationForm.userId=res.data.userId
          this.personalInformationForm.nickname=res.data.nickname
          this.personalInformationForm.password=res.data.password
          this.personalInformationForm.avatar=res.data.avatar
          this.personalInformationForm.email=res.data.email
          this.personalInformationForm.mobilePhoneNumber=res.data.mobilePhoneNumber
          this.personalInformationForm.ip=res.data.ip
          this.personalInformationForm.school=res.data.school
          this.personalInformationForm.major=res.data.major
        }
      })
    },

    ResetButton(){
      // console.log(this.personalInformationForm.userId+"/"+this.personalInformationForm.avatar+"/"+this.personalInformationForm.email+"/"+this.personalInformationForm.mobilePhoneNumber+"/"+ this.personalInformationForm.nickname+"/"+this.personalInformationForm.password+"/"+this.personalInformationForm.ip+"/"+this.personalInformationForm.school+"/"+this.personalInformationForm.major)
      request.put("/user/personInformationUpdate/"+this.personalInformationForm.userId+"/"+this.personalInformationForm.avatar+"/"+this.personalInformationForm.email+"/"+this.personalInformationForm.mobilePhoneNumber+"/"+ this.personalInformationForm.nickname+"/"+this.personalInformationForm.password+"/"+this.personalInformationForm.ip+"/"+this.personalInformationForm.school+"/"+this.personalInformationForm.major).then(res => {
        console.log(res.data)
        if (res.data == 500) {
          alert("用户id返回错误,返回推荐文章页面!")
          router.push("/CommentView")
        } else {
          alert("修改成功！")
          router.push("/PersonInformationView")
        }
      })
    }
  },

  data() {
    return {
      personalInformationForm: {
        userId: '',
        nickname: '',
        password: '',
        avatar: '',
        email: '',
        mobilePhoneNumber: '',
        ip: '',
        school: '',
        major: '',
      },
      personalInformationRules:{
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        avatar: [{ required: true, message: "请设置头像", trigger: "blur" }],
        email: [{ required: true, message: "请输入邮件", trigger: "blur" }],
        mobilePhoneNumber: [{ required: true, message: "请输入电话", trigger: "blur" }],
        ip: [{ required: true, message: "请输入家庭住址", trigger: "blur" }],
        school: [{ required: true, message: "请输入学校", trigger: "blur" }],
        major: [{ required: true, message: "请输入专业", trigger: "blur" }],
      },
    }
  }
}
</script>

<style>
.personalInformation {
  width: 1270px;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-position: left top;
  /*background-color: #242645;*/
  /*background-image: url("~@/assets/images/shangan.png");*/
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: #fff;
  font-family: "Source Sans Pro";
  position: relative;
}

.personalInformationDate {

  width: 600px;
  height: 650px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 1;
  background: linear-gradient(
      20deg,
      rgba(0, 0, 0, 0) 80%,
      rgb(0, 0, 0) 100%
  );
}

.inps input {
  border: none;
  color: midnightblue;
  background-color: transparent;
  font-size: 12px;
}

.submitBtn {
  background-color: transparent;
  color: #39f;
  width: 200px;
}
</style>